<template>
  <div>
    <div class="listBox">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="left">
          <van-checkbox v-model="item.checked" @change="changeOne" checked-color="#ee0a24" icon-size="30px"></van-checkbox>
        </div>
        <div class="right">
          <van-swipe-cell>
            <van-card
              :title="item.goodsname"
              class="goods-card"
              :thumb="$pre + item.img"
            >
              <div slot="num"><van-stepper disable-input integer v-model="item.num" @plus="numAdd(item.id)" @minus="numReduce(item.id)"/></div>
              <div slot="desc" class="desc">
                单价：￥{{ item.price | priceFilter }}
              </div>
              <div slot="price" class="price">
                ￥{{ (item.price * item.num) | priceFilter }}
              </div>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="delGoods(item.id)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <van-submit-bar :price="totalPrice*100" :button-text="'去结算（'+totalNum+')'" @submit="onSubmit">
      <van-checkbox v-model="allChecked" @click="changeAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { reqCartlist,reqCartedit,reqCartdelete } from "../../http/http";
import {Toast} from 'vant'
export default {
  data() {
    return {
      list: [],
      allChecked:false,
    };
  },
  mounted() {
    this.getCartList();
  },
  methods: {
    //获取购物车列表
    async getCartList() {
      let { uid } = JSON.parse(localStorage.getItem("isLogin"));
      let { data: res } = await reqCartlist({ uid });
      if (res.code == 200) {
        let arr = res.list ? res.list : [];
        arr.forEach(item => {
          let obj = this.list.find((i) => i.id === item.id);
          item.checked= obj ? obj.checked : false;
        });
        this.list = arr
      }
    },
    //修改购物车商品数量
    async numAdd(id){
      let {data:res} = await reqCartedit({id,type:2});
      if(res.code ==200){
        this.getCartList();
      }
    },
    async numReduce(id){
       let {data:res} = await reqCartedit({id,type:1});
      if(res.code ==200){
        this.getCartList();
      }
    },
    //删除购物车商品
    async delGoods(id){
      let {data:res} = await reqCartdelete({id});
      if(res.code == 200){
        this.getCartList();
      }
    },
    //全选
    changeAll(){
      this.list.forEach(item=> item.checked=this.allChecked);
    },
    //改变单个复选框
    changeOne(){
      let flag = this.list.every(item => item.checked);
      this.allChecked =flag;
    },
    //去结算
    onSubmit(){
      let idArr=this.list.filter(item => item.checked).map(item => item.id);
      if(idArr.length ==0){
        Toast('请选择你要购买的商品')
        return;
      }
      let obj = {
        totalNum:this.totalNum,
        totalPrice:this.totalPrice,
        shopID:idArr.join(',')
      }
      sessionStorage.setItem('orderInfo',JSON.stringify(obj))
      this.$router.push('/order');
    }
  },
  computed:{
    totalPrice(){
      let sum =0;
      this.list.forEach(item=>{
        if(item.checked){
          sum += item.price * item.num
        }
      })
      return  sum 
    },
    totalNum(){
      let sum =0;
      this.list.forEach(item=>{
        if(item.checked){
          sum +=  item.num
        }
      });
      return sum;
    }
  }
};
</script>

<style lang="less" scoped>
.van-submit-bar__button{
  width: 140px;
}
.listBox {
  height: calc(100vh - 165px);
  overflow-y: scroll;
}
.van-submit-bar {
  position: fixed;
  bottom: 1.02rem;
  border-top: 1px solid #ccc;
}
.item {
  display: flex;
  .right {
    flex: 1;
  }
  .left {
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.van-checkbox{
  justify-content: center;
}
.van-card__title {
  line-height: 1em;
}
.delete-button {
  height: 100%;
}
.van-card__title.van-multi-ellipsis--l2 {
  font-weight: 600;
  font-size: 22px;
}
.desc {
  font-size: 22px;
  margin-top: 5px;
}
.price {
  font-size: 0.35rem;
  color: orangered;
}
</style>